import { defineComponent } from "vue";
import { TitleProps } from "./types";
import RowView from "../RowView";
import LabelGroup from "../LabelGroup";
import TextView from "../TextView";
import { getSize } from "@/command/apiTool";

export default defineComponent({
  name: "",
  props: TitleProps,
  setup(props, { slots }) {
    return () => {
      const renderView = (view: any) => {
        if (!view) return null;
        switch (typeof view) {
          case "string":
            return <span>{view}</span>;
          case "function":
            return <span>{view()}</span>;
        }
      };
      if (!props.title) return null;
      return (
        <RowView
          class={
            "text-[#333333] text-[16px] flex  items-center justify-between"
          }
        >
          <RowView>
            <span
              class="text-[16px] text-[#1F1F1F] whitespace-nowrap truncate "
              style={{
                maxWidth:
                  props.maxLength > 0 ? getSize(props.maxLength * 18) : "",
              }}
            >
              {props.title || slots.default?.()}
            </span>
            {props.labels && (
              <LabelGroup data={props.labels} class={"ml-[8px]"} />
            )}
          </RowView>
          {props.right && renderView(props.right)}
        </RowView>
      );
    };
  },
});
